<template>
    <div>
        <table>
            <tr><td>名称</td><td>数量</td><td>价格</td></tr>
            <tr v-for="(item,index) in arry">
                
                <td>{{item.name}}</td>
                <td>
                    <button @click="addorminus(index,'-')">-</button>
                    <input type="text" v-model="arry[index].num">
                    <button @click="addorminus(index,'+')">+</button>
                </td>
                <td>{{item.price}}</td>
            </tr>
        </table>
        <p>总数量：{{checknum()[0]}}&emsp;&emsp;总价格：{{checknum()[1]}}</p>
        <br/><br/>
        {{count}}
        <button @click="count++">点我就加1</button>
        {{reverse}}
        <ul>
            <li v-for="(item,index) in arry" :class="{on:index%2==0,off:index%2!=0}">
                {{item.name}}
                {{index}}
            </li>
        </ul>
        <p v-if="type==='b'">{{type}}</p>
        <h2 v-show="ok">展示了</h2>
        <div v-html="msg"></div>
        <div>{{msg}}</div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            msg:'<h1>这是一个变量<h1>',
            ok:false,
            type:"b",
            arry:[{name:"辣条",num:1,price:2},{name:"方便面",num:1,price:3},{name:"薯片",num:1,price:5}],
            count:0
        }
    },
    // 监听属性
    watch:{
        count:function(newvalue,oldvalue){
            console.log('计数器由'+oldvalue+'变成新的'+newvalue)
        }
    },
    // 计算属性
    computed:{
        reverse:function(){
            console.log(this.msg.split('').reverse().join(''))
            return this.msg.split('').reverse().join('')
        }
    },
    mounted:function(){

    },
    methods:{
        checknum(){
            var count=0;
            var prices=0
            for(let i=0,l=this.arry.length;i<l;i++){
                count+=parseInt(this.arry[i].num);
                prices+=(this.arry[i].num*this.arry[i].price);
            }
            return [count,prices]
        },
        addorminus(index,method){
            if(method==='-'){
                if(this.arry[index].num>1){
                    this.arry[index].num--;
                }
            }else if(method==='+'){
                this.arry[index].num++;
            }
        },
    }
}
</script>
<style>
    .on{background: blue;
        color: white;
    }
    .off{background: red;
        color:green;}
</style>